<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<meta name="format-detection" content="telephone=no">
		<title></title>
		<script>
			if(localStorage.getItem("language") == "zh_cn") {
				document.write("<script type='text/javascript' src='js/zh_cn.js'><\/script>");
			} else if(localStorage.getItem("language") == "zh_tw") {
				document.write("<script type='text/javascript' src='js/zh_tw.js'><\/script>");
			} else {
				document.write("<script type='text/javascript' src='js/en.js'><\/script>");
			}
		</script>
		<script type="text/javascript" src="jquery.js"></script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}
			
			#tab table {
				width: 100%;
				padding: 0px;
				margin: 0px;
				border-spacing: 0px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			
			#tab table th,
			table td {
				text-align: center;
				border: 1px solid #ccc;
			}
			
			#tab table tr:nth-child(even) {
				background: #f5f5f5;
			}
			
			#tab thead tr {
				height: 30px;
			}
			
			button {
				min-width: 64px;
				line-height: 20px;
				margin: 0px 10px;
				border-radius: 4px;
				color: #333;
				border: 1px solid #ccc;
				background-color: #fff;
				cursor: pointer;
				padding: 2px 7px 2px;
				color: #fff;
				background-color: #337ab7;
				border-color: #2e6da4;
			}
			
			#tab table img {
				width: 30px;
			}
			
			.k-overlay {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 100;
				width: 100%;
				height: 100%;
				background-color: #000;
				filter: alpha(opacity=50);
				display: none;
				opacity: 0.5;
			}
			
			.content {
				display: none;
				justify-content: center;
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				align-items: center;
				z-index: 102
			}
			
			.content table {
				border: 1px solid #ccc;
				border-radius: 4px;
				background: #fff;
			}
			
			.content table tr {
				line-height: 50px;
			}
			
			.content table tr td {
				text-align: left;
				border: 0px;
				margin-left: 10px;
				padding: 0px 20px;
			}
			
			.content input {
				padding: 5px;
				margin: 0px 0px 0px 0px;
				border-radius: 4px;
				border: 1px solid #ccc;
			}
			
			.content thead tr td {
				border-bottom: 1px solid #ccc;
			}
		</style>
		<script type="text/javascript">
			function add() {
				$(".k-overlay,.content").css("display", "flex");
			}
		</script>
	</head>

	<body>
		<div id="tab" style="width: 98%;padding: 1%;">
			<table>
				<thead>
					<tr>
						<td colspan="4" style="text-align:left;line-height: 40px;border-right: 0px;font-weight: bold;padding-left: 30px;"><script>document.write(language.Contractor)</script><input type="text" placeholder="搜索" style="padding: 5px;margin-left: 20px;border-radius: 4px;border:1px solid #ccc;" /></td>

						<td colspan="4" style="text-align:right;line-height: 40px;border-left: 0px;">
							<!-- <button onclick="add()">增加</button> --></td>
					</tr>
					<tr style="background: #f5f5f5;">
						<th style="width: 5%;"><script>document.write(language.order_number)</script></th>
						<th style="width: 10%;"><script>document.write(language.Contractor)</script></th>
						<th style="width: 10%;"><script>document.write(language.Person_in_charge)</script></th>
						<th style="width: 10%;"><script>document.write(language.telphone)</script></th>
						<th style="width: 10%;"><script>document.write(language.id_type)</script></th>
						<th style="width: 15%;"><script>document.write(language.id_number)</script></th>
						<th style="width: 15%;"><script>document.write(language.project)</script></th>
						<th style="width: 10%;"><script>document.write(language.operation)</script></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>ABC Electric Company</td>
						<td>Zhangerdai</td>
						<td>13666666666</td>
						<td>ID card</td>
						<td>A8086***</td>
						<td>data base</td>
						<td><button>detailed information</button></td>
					</tr>
					<tr>
						<td>2</td>
						<td>Zhongcheng information company</td>
						<td>阎锡林</td>
						<td>15901421254</td>
						<td>ID card</td>
						<td>A8086***</td>
						<td>data base</td>
						<td><button>detailed information</button></td>
					</tr>
					<tr>
						<td>3</td>
						<td>Times network company</td>
						<td>李峰</td>
						<td>13165266686</td>
						<td>ID card</td>
						<td>A8086***</td>
						<td>data base</td>
						<td><button>detailed information</button></td>
					</tr>
					<tr>
						<td>4</td>
						<td>自创科技有限公司</td>
						<td>王凯</td>
						<td>13159874832</td>
						<td>ID card</td>
						<td>A8086***</td>
						<td>data base</td>
						<td><button>detailed information</button></td>
					</tr>
					<tr>
						<td>5</td>
						<td>YASUMICHI Design Co. Ltd.</td>
						<td>赵钱</td>
						<td>18666237789</td>
						<td>ID card</td>
						<td>A8086***</td>
						<td>data base</td>
						<td><button>detailed information</button></td>
					</tr>
				</tbody>

			</table>
		</div>

		<div class="k-overlay"></div>

		<div class="content">
			<table style="border-spacing:0px;">
				<thead>
					<tr>
						<td colspan="2" style="text-align:left;line-height: 40px;font-weight: bold;padding-left: 30px;">新增承办商</td>
						<td colspan="2" style="text-align:right;line-height: 40px;"><button onclick='$(".k-overlay,.content").css("display","none");' style="border:0px;margin:0px;">X</button></td>
					</tr>
				</thead>
				<tbody>
					<tr style="line-height: 10px;">
						<td colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td>承办商:</td>
						<td><input type="text" placeholder="请输入承办商" /></td>
						<td>负责人:</td>
						<td><input type="text" placeholder="请输入负责人" /></td>
					</tr>
					<tr>
						<td>证件类别:</td>
						<td>
							<select style="width: 150px;height: 30px;">
								<option>ID card</option>
							</select>
						</td>
						<td>证件号:</td>
						<td><input type="text" placeholder="请输入证件号" /></td>
					</tr>
					<tr>
						<td>移动电话:</td>
						<td><input type="text" placeholder="请输入移动电话" /></td>
						<td>时间:</td>
						<td><input type="data" value="2017-10-24" /></td>
					</tr>
					<tr style="line-height: 10px;">
						<td colspan="4">&nbsp;</td>
					</tr>
				</tbody>
				<tfoot>
					<tr style="line-height: 10px;">
						<td style="border-top: 1px solid #ccc;" colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="3" style="text-align: right;">
							<button onclick='$(".k-overlay,.content").css("display","none");'>取消</button>
							<button onclick='$(".k-overlay,.content").css("display","none");'>保存</button>
						</td>
					</tr>
					<tr style="line-height: 10px;">
						<td colspan="4">&nbsp;</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</body>

</html>